<template>
	<view class="container">
		<view class="content">
			<view class="title">
				<view class="title-1">
					<title>首页</title>
					<title style="margin-top: 10px;font-size: 15px;">{{list.merName}}</title>
				</view>
			</view>
			<view class="title">
				<view class="">
					<uv-row customStyle="margin-bottom: 10px">
						<uv-col span="6">
							<view class="demo-layout bg-purple-light">
								<view class="title-2">
									<title style="margin-top: 10px;font-size: 15px;">当日交易金额</title>
									<title bold="true">{{fenecList.orderAmtSum || 0}}
										<title style="font-size: 15px;">元</title>
									</title>
								</view>
							</view>
						</uv-col>
						<uv-col span="6">
							<view class="demo-layout bg-purple">
								<view class="title-2">
									<title style="margin-top: 10px;font-size: 15px;">当日交易笔数</title>
									<title bold="true">{{fenecList.orderCntSum || 0}}
										<title style="font-size: 15px;">笔</title>
									</title>
								</view>
							</view>
						</uv-col>
					</uv-row>
				</view>
			</view>
			<view class="merchan-data-1">
				<uv-line color="#eceef2"></uv-line>
			</view>
			<view class="title-3">
				<view class="">
					<uv-row customStyle="margin-bottom: 10px">
						<uv-col span="4">
							<view class="demo-layout bg-purple-light">
								<view style="display: grid;">
									<title style="margin-top: 10px;font-size: 13px;">当日退款笔数</title>
									<title bold="true">{{fenecList.refundCntSum || 0}}
										<title style="font-size: 12px;">笔</title>
									</title>
								</view>
							</view>
						</uv-col>
						<uv-col span="4">
							<view class="demo-layout bg-purple-light">
								<view style="display: grid;">
									<title style="margin-top: 10px;font-size: 13px;">当日退款金额</title>
									<title bold="true">{{fenecList.refundAmtSum || 0}}
										<title style="font-size: 12px;">元</title>
									</title>
								</view>
							</view>
						</uv-col>
						<uv-col span="4">
							<view class="demo-layout bg-purple">
								<view style="display: grid;">
									<title style="margin-top: 10px;font-size: 13px;">实收金额</title>
									<title bold="true">{{fenecList.txnAmtSum || 0}}
										<title style="font-size: 12px;">元</title>
									</title>
								</view>
							</view>
						</uv-col>
					</uv-row>
				</view>
			</view>
		</view>
		<view class="merchantList">
			<view style="margin: 5%;display: flex;justify-content: space-between;">
				<title style="font-weight: bold;color: #242f66;">历史交易记录</title>
				<view style="width: 100rpx;">
					<uv-form-item prop="model" @click="showSexSelect">
						<uv-input v-model="model" color="#fff" disabled disabledColor="#031a6e" border="none">
						</uv-input>
					</uv-form-item>
					<uv-action-sheet ref="sexSelect" :actions="actions" @select="sexSelect">
					</uv-action-sheet>
				</view>
			</view>
			<view style="margin: 5%;" v-if="time">
				<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
			</view>
			<view class="merchan">
				<view style="width: 90%;height: 600rpx;background: #fff;border-radius: 20rpx;">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" />
				</view>
			</view>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import {
		querySum,
		orderSett
	} from "../../network/Home.js"
	export default {
		data() {
			return {
				list: {},
				fenecList: {},
				range: [],
				model: "本周",
				actions: [{
					name: '本周',
					id: "1"
				}, {
					name: '自定义',
					id: "2"
				}],
				time: false,
				startTime: "",
				endTime: "",
				txnAmtData: [],
				txnCntData: [],
				settTimeData: ["0", "1", "2", "3", "4", "5", "6", "7"],
				chartData: {},
				opts: {
					color: ["#179bd7", "#031a6e"],
					padding: [20, 0, 5, 0],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 5,
							barBorderRadius: [
								6,
								6,
								6,
								6
							]
						},
					},
				}
			}
		},
		onLoad(e) {
			this.timeFrame();
			this.list = uni.getStorageSync('listData')
			this.merchantList()
			this.historicalData();
		},
		onReady() {
			this.getServerData();
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
				this.startTime = this.range[0]
				this.endTime = this.range[1]
				if (this.range != []) {
					this.historicalData();
				}
			},
		},
		methods: {
			merchantList() {
				var arr = {
					startTime: this.list.crtTime,
					endTime: this.list.updTime,
					merNo: this.list.merNo,
					shopNo: this.list.id,
				}
				querySum(arr).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						this.fenecList = res.data.data.orderSumVo
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			},
			showSexSelect() {
				this.$refs.sexSelect.open();
				this.hideKeyboard();
			},
			sexSelect(e) {
				this.model = e.name;
				if (e.id != 1) {
					this.time = true
					this.timeFrame();
					this.historicalData();
				} else {
					this.time = false
				}
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			maskClick(e) {},
			historicalData() {
				var arr = {
					startTime: this.startTime,
					endTime: this.endTime,
					merNo: this.list.merNo,
					shopNo: this.list.id,
				}
				orderSett(arr).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						console.log(res.data.data.rows)
						const arr = res.data.data.rows
						arr.forEach((item, index) => {
							this.txnAmtData.push(item.txnAmt)
							this.txnCntData.push(item.txnCnt)
							this.settTimeData.push(item.settTime)
						})
						this.getServerData();
						console.log(this.txnAmtData)
						console.log(this.txnCntData)
						console.log(this.settTimeData)
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			},
			timeFrame() {
				var now = new Date();
				var nowTime = now.getTime();
				var day = now.getDay();
				var oneDayTime = 24 * 60 * 60 * 1000;
				//显示周一
				var MondayTime = nowTime - (day - 1) * oneDayTime;
				//显示周日
				var SundayTime = nowTime + (7 - day) * oneDayTime;
				//初始化日期时间
				var monday = new Date(MondayTime);
				var sunday = new Date(SundayTime);

				function add0(m) {
					return m < 10 ? '0' + m : m
				}

				function format(shijianchuo) {
					//shijianchuo是整数，否则要parseInt转换
					var time = new Date(shijianchuo);
					var y = time.getFullYear();
					var m = time.getMonth() + 1;
					var d = time.getDate();
					//var h = time.getHours();
					//var mm = time.getMinutes();
					//var s = time.getSeconds();
					return y + '-' + add0(m) + '-' + add0(d);
					//return y+''+add0(m)+''+add0(d)+''+add0(h)+':'+add0(mm)+':'+add0(s);
				}
				console.log(format(monday));
				console.log(format(sunday));
				this.startTime = format(monday)
				this.endTime = format(sunday)
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.settTimeData,
						series: [{
								name: "交易笔数",
								data: this.txnCntData
							},
							{
								name: "交易金额",
								data: this.txnAmtData
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.content {
		width: 100%;
		height: 50%;
		background-image: url('../../static/homePage.png');
		background-size: 100% 100%;
	}

	.merchantList {
		background: #f4f4f4;
		height: 80%;
		width: 100%;
	}

	.merchan {
		display: flex;
		justify-content: center;
	}

	.ArrList {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.List {
		background: #fff;
		height: 320rpx;
		width: 85%;
		border-radius: 20rpx;
		margin-top: 5%;
	}

	.merchan-data {
		display: flex;
	}

	.imgData {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		background-image: url('../../static/index.png');
		background-size: 100% 100%;
		margin: 40rpx 50rpx 20rpx 50rpx;
	}

	.image {
		max-width: 100rpx;
		max-height: 100rpx;
	}

	.text {
		display: flex;
		flex-flow: column;
	}

	.merchan-data-1 {
		display: flex;
		justify-content: center;
	}

	/deep/.uv-line {
		width: 90% !important;
	}

	.merchan-data-2 {
		margin-top: 8%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.title-1 {
		color: #fff;
		margin: 50px 0px 40px 15px;
		font-size: 50rpx;
		display: grid;
	}

	.title-2 {
		color: #fff;
		margin: 0px 0px 5px 15px;
		font-size: 60rpx;
		display: grid;
	}

	.title-3 {
		color: #fff;
		margin: 0px 0px 5px 15px;
		font-size: 40rpx;
		display: grid;
	}

	.merchan-data-1 {
		display: flex;
		justify-content: center;
	}

	.demo-layout {
		display: flex;
		justify-content: center;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	/deep/.uv-form-item__body {
		padding: 0 !important;
	}
</style>